<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .menu{
            width: 200px;
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            padding: 1px;
            display: none;
            position: absolute;
        }
        li{
            border-bottom: 1px dashed #ccc;
            font-size: 20px;
            line-height: 20px;
            padding: 5px;
            display: flex;
            justify-content: space-between;
        }
        li:last-child{
            border-bottom: 0;
        }
        li:hover{
            background: #999;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class='copy'>复制<span>ctrl+c</span></li>
        <li class='paste'>粘贴<span>ctrl+v</span></li>
        <li class='delete'>删除<span>del</span></li>
        <li class='cut'>剪切<span>ctrl+x</span></li>
        <li class='save'>保存<span>ctrl+s</span></li>
    </ul>

    <script>
        var menu = document.querySelector('.menu');
        var lis = document.querySelectorAll('li');

        document.oncontextmenu = function(e){
            // 阻止默认行为
            e.preventDefault();
            // 显示自定义菜单
            menu.style.display = 'block';
            // 定位
            menu.style.left = e.clientX + 'px';
            menu.style.top = e.clientY + 'px';

            document.onclick = function(e){
                // 弹窗提示
                switch(e.target.className){
                    case 'copy':
                        alert('复制功能');
                        break
                    case 'paste':
                        alert('粘贴功能');
                        break
                    case 'delete':
                        alert('删除功能');
                        break
                    case 'cut':
                        alert('剪切功能');
                        break
                    case 'save':
                        alert('保存功能');
                        break
                }
                // 菜单消失
                menu.style.display = 'none';
            }
        }
    </script>
</body>
</html>